/**
 *
 * Created by maiseries on 2017/9/29.
 */
import React from 'react'
import {
    View,
    Image,
    Text,
    TouchableWithoutFeedback,
    StyleSheet,
    Modal,
    Platform
} from 'react-native'
import Swiper from 'react-native-swiper';
import AssetTypeIconBtn from './AssetTypeIconBtn';
import AssetTypeDict from '../config/dict/AssetTypeStatic'

import SystemService from '../services/System';

const LIST_PAGE_SIZE = 9;
let self = null, parentSelf = null;

export default class item extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            list: []
        };
        self = this;
    }

    async componentWillMount() {
        this.load();
    }

    async load() {
        const {result,message,data} = await SystemService.getAssetType();
        if(result){
            const list = data.assetTypes;
            self.setState({list})
        }else{
            Toast.show(message)
        }
    }

    async reload() {
        const {result,message,data} = await SystemService.getAssetTypeFromWeb();
        if(result){
            const list = data.assetTypes;
            self.setState({list})
        }else{
            Toast.show(message)
        }
    }

    //绘制分页按钮列表
    listDraw() {
        if(self.state.list.length > 0){
            const pageNumber = Math.ceil(self.state.list.length / LIST_PAGE_SIZE);
            if (pageNumber > 1) {
                let content = [];
                for (let i = 0; i < pageNumber; i++) {
                    const listFragment = self.state.list.slice(i * LIST_PAGE_SIZE, (i + 1) * LIST_PAGE_SIZE);
                    content.push(<View key={i} style={styles.listItemBox}>
                        {
                            listFragment.map((item, index) => {
                                return(
                                    <AssetTypeIconBtn
                                        onPress={()=>self.skip('DemandForm',{selectedItem: item})}
                                        style={styles.item}
                                        key={index}
                                        wrap={3}
                                        icon={AssetTypeDict[item.asset_type_code]}
                                        text={item.asset_type_name}/>
                                )
                            })
                        }
                    </View>);
                }
                return (
                    <Swiper>
                        {
                            content
                        }
                    </Swiper>
                )
            } else {
                return (
                    <View style={styles.listItemBox}>
                        {
                            self.state.list.map((item, index) => {
                                return(
                                    <AssetTypeIconBtn
                                        onPress={()=>self.skip('DemandForm',{selectedItem: item})}
                                        style={styles.item}
                                        key={index}
                                        wrap={3}
                                        icon={AssetTypeDict[item.asset_type_code]}
                                        text={item.asset_type_name}/>
                                )
                            })
                        }
                    </View>
                )
            }
        }else{
            return (
                <TouchableWithoutFeedback onPress={()=>this.reload()}>
                    <View style={[base.rowCC, styles.listItemBox]}>
                        <Text allowFontScaling={false} style={styles.noDataText}>数据获取失败，请点击重试!</Text>
                    </View>
                </TouchableWithoutFeedback>
            )
        }
    }

    //显示/关闭界面
    toggleModal() {
        parentSelf.setState({
            tabBarModalShow: false
        });
    }

    skip(path, params) {
        self.toggleModal();
        parentSelf.props.navigation.navigate(path, params);
    }

    render() {
        parentSelf = this.props.self;
        return (
            <Modal
                onRequestClose={()=>{}}
                animationType={"fade"}
                transparent={true}
                visible={parentSelf.state.tabBarModalShow || false}
            >
                <View style={[base.clientWH, styles.container]}>
                    <View style={styles.topBox}>
                        <Text allowFontScaling={false} style={styles.topText}>发布需求</Text>
                        <Text allowFontScaling={false} style={styles.topSubText}>您要发布什么类型的资产呢？</Text>
                    </View>
                    <View style={styles.listBox}>
                        {this.listDraw()}
                    </View>
                    <TouchableWithoutFeedback onPress={() => this.toggleModal()}>
                        <View style={[base.columnCC, Platform.OS === 'ios' ? styles.btnBox : styles.btnBoxAndroid]}>
                            <Image
                                source={require('../sources/icon_tab_close.png')}
                                style={styles.btnIcon}/>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
            </Modal>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        justifyContent: 'flex-end',
        alignItems: 'center',
        backgroundColor: 'rgba(255,255,255,0.9)'
    },
    topBox: {
        alignSelf: 'stretch',
        paddingHorizontal: layout.width(84),
        paddingVertical: layout.height(80)
    },
    topText: {
        paddingBottom: layout.height(28),
        fontSize: layout.font(36),
        color: layout.MAIN_AUX_COLOR,
        fontWeight: '900'
    },
    topSubText: {
        fontSize: layout.font(30),
        color: layout.MAIN_AUX_COLOR,
    },
    listBox: {
        alignSelf: 'stretch',
        height: layout.height(680),
    },
    listItemBox: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignSelf: 'stretch',
    },
    item: {
        height: layout.height(200)
    },
    btnBox: {
        alignSelf: 'stretch',
        height: layout.BOTTOM_TAB_HEIGHT,
        paddingBottom: layout.height(24)
    },
    btnBoxAndroid: {
        alignSelf: 'stretch',
        height: layout.BOTTOM_TAB_HEIGHT_ANDROID,
        paddingBottom: layout.height(24)
    },
    btnIcon: {
        width: layout.width(32),
        height: layout.height(32)
    },
    noDataText: {
        fontSize: layout.font(28),
        color: layout.FORM_AUX_FONT_COLOR
    }
});